<template>
  <div class="index-box" ref="index">
    <el-row :gutter="10">
      <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
        <div class="search" ref="search">
          <el-form :inline="true" :model="searchForm" size="small" ref="searchForm" @submit.native.prevent
            class="demo-form-inline" id="searchBox">
            <el-form-item prop="code">
                <el-input v-model="searchForm.code" clearable placeholder="兑换编号"></el-input>
            </el-form-item>
            <el-form-item prop="nickOrPhone">
                <el-input v-model="searchForm.nickOrPhone" clearable placeholder="用户名称或手机号"></el-input>
            </el-form-item>
           <el-form-item prop="auditTime">
             <el-date-picker v-model="auditTime" type="daterange" align="right" unlink-panels range-separator="至"
               start-placeholder="开始审核日期" end-placeholder="结束审核日期" format="yyyy-MM-dd" value-format="yyyy-MM-dd"
               :picker-options="pickerOptions">
             </el-date-picker>
           </el-form-item>
           <el-form-item prop="applyTime">
             <el-date-picker v-model="applyTime" type="daterange" align="right" unlink-panels range-separator="至"
               start-placeholder="开始申请日期" end-placeholder="结束申请日期" format="yyyy-MM-dd" value-format="yyyy-MM-dd"
               :picker-options="pickerOptions">
             </el-date-picker>
           </el-form-item>
            <el-form-item class="clearfix">
              <el-button type="primary" @click="handleSearch()" icon="el-icon-search">搜索</el-button>
              <el-button icon="el-icon-refresh" size="small" @click="resetSearch">重置</el-button>
            </el-form-item>
          </el-form>
        </div>
        <div class="actionBtn" ref="actionBtn">
          <div class="actionBtnLeft">
            <el-radio-group v-model="searchForm.status" size="small" @change="handleSearch()">
              <el-radio-button >全部</el-radio-button>
              <el-radio-button label="0">待审核</el-radio-button>
              <el-radio-button label="1">审核通过</el-radio-button>
              <el-radio-button label="2">驳回</el-radio-button>
            </el-radio-group>
            <el-radio-group v-model="searchForm.userLevel" size="small" @change="handleSearch()" style="margin:0 10px">
              <el-radio-button >全部</el-radio-button>
              <el-radio-button :label="item.levelId" v-for="item in levelList">{{item.name}}</el-radio-button>
            </el-radio-group>
            <el-radio-group v-model="searchForm.pointsLevelId" size="small" @change="handleSearch()" >
              <el-radio-button >全部</el-radio-button>
              <el-radio-button :label="item.id" v-for="item in pointsLevelList">{{item.name}}</el-radio-button>
            </el-radio-group>

            <el-button
              style="margin-left:10px"
              type="warning"
              icon="el-icon-download"
              size="small"
              :loading="btnLoading"
              v-has="'user:integralAudit:down'"
              @click="handleExport"
            >导出</el-button>
          </div>
          <div class="actionBtnRight">
              <MyRefresh></MyRefresh>
              <MyTableColumnSet :tableColumn.sync="tableColumn" :hideTableColumn.sync="hideTableColumn" :tableColumnType.sync="tableColumnType"></MyTableColumnSet>
          </div>
        </div>
        <div class="table" ref="table">
          <el-table :data="dataList" style="width: 100%" row-key="id" border :height="tableHeight" v-loading="loading"   stripe>
            <el-table-column type="selection" width="55" align="center"> </el-table-column>
            <el-table-column prop="code" label="兑换编号" v-if="!hideTableColumn.includes('customerId')" align="center"></el-table-column>
            <el-table-column prop="name" label="头像" v-if="!hideTableColumn.includes('userface')" align="center">
              <template #default="scope">
                 <el-image :src="scope.row.userface" fit="fill" v-image-preview="scope.row.userface" class="img"></el-image>
              </template>
            </el-table-column>
            <el-table-column prop="fullname" label="真实姓名" v-if="!hideTableColumn.includes('code')" align="center"></el-table-column>
            <el-table-column prop="nickname" label="用户名" v-if="!hideTableColumn.includes('nickname')" align="center"></el-table-column>
            <el-table-column prop="telephone" label="手机号" v-if="!hideTableColumn.includes('telephone')" align="center"></el-table-column>
            <el-table-column prop="leveName" label="会员等级" v-if="!hideTableColumn.includes('leveName')" align="center"></el-table-column>


            <el-table-column prop="pointsLevelName" label="积分等级" v-if="!hideTableColumn.includes('pointsLevelName')" align="center"></el-table-column>、
            <el-table-column prop="value" label="兑换积分" v-if="!hideTableColumn.includes('value')" align="center"></el-table-column>
            <el-table-column prop="exchangeValue" label="兑换仟豆数" v-if="!hideTableColumn.includes('exchangeValue')" align="center"></el-table-column>
            <el-table-column prop="levelName" label="审核人" v-if="!hideTableColumn.includes('pointsYes')" align="center">
              <template slot-scope="scope">
                 {{scope.row.auditUserName}}<span v-if="scope.row.auditUserCode">({{scope.row.auditUserCode}})</span>
              </template>
            </el-table-column>
            <el-table-column prop="remark" label="审核备注" v-if="!hideTableColumn.includes('remark')" align="center" width="300" show-overflow-tooltip></el-table-column>
            <el-table-column prop="applyTime" label="申请时间" v-if="!hideTableColumn.includes('applyTime')" align="center">
              <template slot-scope="scope">
                <span>{{ parseTime(scope.row.applyTime) }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="auditTime" label="审核时间" v-if="!hideTableColumn.includes('auditTime')" align="center">
              <template slot-scope="scope">
                <span>{{ parseTime(scope.row.auditTime) }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="auditTime" label="状态" v-if="!hideTableColumn.includes('status')" align="center">
              <template slot-scope="scope">
                <el-tag type="primary" v-if="scope.row.status=='0'">待审核</el-tag>
                <el-tag type="success" v-else-if="scope.row.status=='1'">审核通过</el-tag>
                <el-tag type="warning" v-else-if="scope.row.status=='2'">驳回</el-tag>
              </template>
            </el-table-column>

            <el-table-column prop="name" label="操作" width="140" fixed="right">
              <template #default="scope">
                  <el-button
                    v-if="scope.row.status=='0'"
                    size="medium"
                    type="text"
                    icon="el-icon-money"
                    @click="hanleIntegralAudit(scope.row)"
                    v-has="'user:integralAudit:audit'"
                  >审核</el-button>
                  <el-button
                    size="medium"
                    type="text"
                    icon="el-icon-view"
                    @click="hanleView(scope.row)"
                  >查看</el-button>

              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="page" ref="page">
          <MyPagination
             v-show="total"
            :total="total"
            :page.sync="searchForm.pageNum"
            :limit.sync="searchForm.pageSize"
            @pagination="dataInfo"
          />
        </div>
      </el-col>
    </el-row>

    <!-- 积分兑换审核 -->
    <el-dialog title="积分兑换审核" width="600px" v-dialogDrag :visible.sync="integralAuditVisible" @close="integralAuditVisible = false" :close-on-click-modal="false" >
      <el-form  label-position="right" :model="integralAudit" :rules="integralAuditRules" ref="integralAudit">
          <el-form-item label="审核状态:" prop="status" label-width="135px">
            <el-radio-group v-model="integralAudit.status">
                <el-radio label="1">通过</el-radio>
                <el-radio label="2">驳回</el-radio>
              </el-radio-group>
          </el-form-item>
          <el-form-item label="备注:" prop="remark" label-width="135px">
            <el-input v-model="integralAudit.remark" clearable  placeholder="审核备注" type="textarea" rows="4"></el-input>
          </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="integralAuditVisible = false" size="small">取 消</el-button>
        <el-button type="primary" @click="handleSubmitIntegralAudit('integralAudit')" size="small" :loading="userLoading">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 积分兑换查看 -->
    <el-dialog title="积分兑换查看" width="600px" v-dialogDrag :visible.sync="viewVisible" @close="viewVisible = false" :close-on-click-modal="false" >
      <el-descriptions class="margin-top"  :column="1" size="size" :border="true">

          <el-descriptions-item label="用户头像"><el-image :src="statusRow.userface" fit="fill" v-image-preview="statusRow.userface" class="img" style="width: 100px;"></el-image></el-descriptions-item>
          <el-descriptions-item label="用户ID">{{statusRow.code}}</el-descriptions-item>
          <el-descriptions-item label="用户名">{{statusRow.nickname}}</el-descriptions-item>
          <el-descriptions-item label="手机号">{{statusRow.code}}</el-descriptions-item>
          <el-descriptions-item label="会员等级">{{statusRow.leveName}}</el-descriptions-item>
          <el-descriptions-item label="积分等级">{{statusRow.pointsLevelName}}</el-descriptions-item>
          <el-descriptions-item label="兑换积分">{{statusRow.value}}</el-descriptions-item>
          <el-descriptions-item label="兑换仟豆数">{{statusRow.exchangeValue}}</el-descriptions-item>
          <el-descriptions-item label="申请日期">{{parseTime(statusRow.applyTime)}}</el-descriptions-item>
          <el-descriptions-item label="审核日期">{{parseTime(statusRow.auditTime)}}</el-descriptions-item>
          <el-descriptions-item label="审核人"> {{statusRow.auditUserName}}<span v-if="statusRow.auditUserCode">({{statusRow.auditUserCode}})</span></el-descriptions-item>

        </el-descriptions>
        <div slot="footer" class="dialog-footer">
          <el-button @click="viewVisible = false" size="small">取 消</el-button>

        </div>

    </el-dialog>


  </div>
</template>

<script>
  import { pointsList, pointsAudit, pointsExport } from '@/api/getData';
  import option from '../../common/option.js';
  export default {
    data() {
      return {
        userLoading:false,
        loading: false,
        pointsLevelList:[],//
        auditTime:[],
        applyTime:[],
        searchForm: {
          code:undefined,
          nickOrPhone:undefined,
          status:undefined,
          userLevel:undefined,
          pointsLevelId:undefined,
          pageNum:1,
          pageSize:20,
        },
        levelList:[],
        tableColumn:[{/*自定义表格列*/
            name:'编号',
            value:'customerId'
        },{
            name:'用户头像',
            value:'userface'
        },{
            name:'用户ID',
            value:'code'
        },{
            name:'用户名',
            value:'nickname'
        },{
            name:'手机号',
            value:'telephone'
        },{
            name:'会员等级',
            value:'leveName'
        },{
            name:'积分等级',
            value:'pointsLevelName'
        },{
            name:'兑换积分',
            value:'value'
        },{
            name:'兑换仟豆数',
            value:'exchangeValue'
        },{
            name:'审核人',
            value:'pointsYes'
        },{
            name:'审核备注',
            value:'remark'
        },{
            name:'申请时间',
            value:'applyTime'
        },{
            name:'审核时间',
            value:'auditTime'
        },{
            name:'状态',
            value:'status'
        }],
        hideTableColumn:[],/*自定义表格列需要隐藏的*/
        tableColumnType:'staffManagement',/*自定义表格列类型传参*/
        tableHeight:0,//table 高度
        statusRow:{},
        dataList:[],
        total: 0,
        multipleSelection: '',

        integralAudit:{
          id:'',
          status:'',
          remark:''
        },
        integralAuditRules:{
           status: [{required: true, message: '请选择审核状态',trigger: 'blur'}],
        },
        integralAuditVisible:false,

        viewVisible:false

      }
    },
    computed: {
      pickerOptions: () => {
        return option.pickerOptions;
      }
    },
    mounted() {
      this.dataInfo();
      this.getSelect();
      this.$nextTick(() => {
          this.tableHeight = this.$refs.index.offsetHeight - this.$refs.search.offsetHeight - this.$refs.actionBtn.offsetHeight - this.$refs.page.offsetHeight - 55;
      })
    },
    methods: {
      handleSearch(){
          this.page = 1;
          this.dataInfo();
      },
      /** 导出按钮操作 */
       handleExport() {
        let data = this.addDateRange(this.searchForm, this.auditTime, 'auditTimeStart', 'auditTimeEnd');
        data = this.addDateRange(this.searchForm, this.applyTime, 'applyTimeStart', 'applyTimeEnd');
        data.pageNum = undefined;
        data.pageSize = undefined;
         this.$modal.confirm('是否确认导出搜索数据项？').then(() => {
           this.btnLoading = true;
           return pointsExport(data);
         }).then(response => {
           this.$download.name(response.msg);
           this.btnLoading = false;
         }).catch(() => {});
      },
      resetSearch(){
        this.applyTime = [];
        this.auditTime = [];
        this.resetForm('searchForm');
        this.dataInfo();
      },
      async dataInfo() {
        try {
          let data = this.addDateRange(this.searchForm, this.auditTime, 'auditTimeStart', 'auditTimeEnd');
          data = this.addDateRange(this.searchForm, this.applyTime, 'applyTimeStart', 'applyTimeEnd');
          this.loading = true;
          const result = await pointsList(data);
          if (result.code == 200) {
            this.total = result.total;
            this.dataList = result.rows;
          } else {
            this.$message.error(result.msg);
          }
          this.loading = false;
        } catch (err) {
          this.loading = false;
          console.log(err)
        }
      },
      getSelect(){
        this.getCategoryDetails({categoryKey:'member_level_category'}).then(res=>{ this.levelList = res.data; });
        this.getCategoryDetails({categoryKey:'points_level_config'}).then(res=>{ this.pointsLevelList = res.data; });
      },
      hanleView(row){
        this.statusRow = row;
        this.viewVisible = true;
      },
      /** 兑换积分审核 **/
      hanleIntegralAudit(row){
        this.statusRow = row;
        this.integralAudit.id = row.id;
        this.integralAudit.status = '';
        this.integralAudit.remark = '';
        this.integralAuditVisible = true;
      },
      /** 兑换积分审核提交 **/
      handleSubmitIntegralAudit(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.userLoading = true;
            pointsAudit(this.integralAudit).then((result) => {
              if (result.code == 200) {
                this.$message.success(result.msg);
                this.integralAuditVisible = false;
                this.dataInfo();
              } else {
                this.$message.error(result.msg);
              }
              this.userLoading = false;
            });
          }
        })
      },

    }
  }
</script>

<style scoped lang="scss">
  .inputNumber{
    width:180px;
  }
  .el-table .el-dropdown-link{
      cursor: pointer;
      color: #61997A;
      margin-left: 5px;
  }
    .leftDialog{
      height:540px;
      overflow-y: auto;
    }
    .activeVerticalBox .activeItem{
      color:#61997A;
      cursor: pointer;
      margin: 0px;
      text-align: center;
      height:20px;
      line-height: 20px;
    }
    .activeVerticalBox .el-dropdown{
      display: flex;
      justify-content: center;
      color:#61997A;
      cursor: pointer;
    }
    .activeCheckedBox{
      border-top: 1px solid #ddd;
      padding:10px;
      height:52px;
      .el-tag{
        margin-right:10px;
      }
    }
    .rateBox /deep/ .el-rate__icon{
      margin-right: 0px;
    }
    .rateBox>p{
      margin: 0px;
    }
    .rateBox>p> /deep/ .el-rate{
      height:25px;
      line-height:25px;
      display:flex;
    }
    .rateBox>p> /deep/ .el-rate .el-rate__item{
      display:flex;
      align-items: center;
    }
    .rateBox .rateText{
      width:60px;
    }
    .rateBox .content{
      display: flex;
    }
    .rateBox .el-tooltip{
          width: 100px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          display: inline-block;
    }
</style>
